<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <div class="mainor_te">
          <el-button class="mainor_tea" @click="addedFormVisible = true"
            >添加记录</el-button
          >
        </div>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="主机记录" prop="RRKeyWord">
            <el-input
              v-model.trim="form.RRKeyWord"
              placeholder="主机记录"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="main_num boxdq">
        <div class="main_num_l box">
          <p>
            域名：<em>{{ domain }}</em>
          </p>
        </div>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column
            label="主机记录"
            prop="RR"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            label="记录值"
            prop="Value"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="TTL"
            prop="newTLL"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="状态"
            prop="Status"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                :class="[scope.row.Status == 'ENABLE' ? 'enable' : 'disabled']"
              >
                {{ scope.row.Status == "ENABLE" ? "正常" : "禁用" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            :show-overflow-tooltip="true"
            prop="Remark"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="edit_record_show(scope)"
                type="text"
                size="mini"
                class="handle_btn modify"
                >修改</el-button
              >
              <el-button
                @click="delete_record(scope)"
                type="text"
                size="mini"
                class="handle_btn delete"
                >删除</el-button
              >
              <el-button
                @click="add_note_show(scope)"
                type="text"
                size="mini"
                class="handle_btn note"
                >备注</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <!-- 添加记录 -->
    <el-dialog
      title="添加记录"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="addedFormVisible"
      class="main_dialog dialog550"
    >
      <el-form
        :inline="false"
        class="demo-form-inline"
        ref="addRecordListFrom"
        label-width="120px"
        :rules="rules"
        :model="addForm"
      >
        <el-form-item label="主机记录：" prop="RR">
          <el-input
            placeholder="主机记录"
            v-model="addForm.RR"
            clearable
            class="wid240"
          >
            <template slot="append">{{ domain }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="记录值：" prop="">
          <el-input
            placeholder="记录值"
            v-model="ip"
            :disabled="true"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addedFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_record" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改记录 -->
    <el-dialog
      title="修改记录"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="editFormVisible"
      class="main_dialog dialog550"
    >
      <el-form
        :inline="false"
        class="demo-form-inline"
        ref="editRecordListFrom"
        label-width="120px"
        :rules="rules"
        :model="editForm"
      >
        <el-form-item label="主机记录：" prop="RR">
          <el-input
            placeholder="主机记录"
            v-model="editForm.RR"
            clearable
            class="wid240"
          >
            <template slot="append"
              >{{domain}}</template
            >
          </el-input>
        </el-form-item>
        <el-form-item label="记录值：" prop="">
          <el-input
            placeholder="记录值"
            v-model="ip"
            :disabled="true"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirm_edit_record" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 备注 -->
    <el-dialog
      title="添加备注"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="noteFormVisible"
      class="main_dialog dialog550"
    >
      <el-form
        :inline="false"
        class="demo-form-inline"
        label-position="top"
        ref="noteFormVisible"
        label-width="100px"
        :rules="rules"
        :model="noteForm"
      >
        <el-form-item label="备注信息：" prop="Remark">
          <el-input
            placeholder="备注信息"
            type="textarea"
            v-model="noteForm.Remark"
            clearable
            class="wid240"
            :max="50"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noteFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm_edit_remark" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  get_dnsList,
  add_record,
  edit_record,
  delete_record,
  edit_remark
} from "@/api/user/userDomain";

import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import rules from "@/rules/user/userDomain.js";

export default {
  data() {
    return {
      // 时间
      parseTime,
      rules,
      // 分页
      current: {
        page: 1,
        size: 20
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {
        RRKeyWord: ""
      },

      start_time: "",
      end_time: "",
      // 列表数据
      list: [],

      domain: "",
      ip: "",
      listLoading: false,

      // 全选
      selectArr: [],
      //   添加记录
      addedFormVisible: false,
      addForm: {
        RR: ""
      },
      //   修改记录
      editFormVisible: false,
      editForm: {
        RR: "",
        RecordId: "",
        RROld: ""
      },
      //   添加备注
      noteFormVisible: false,
      noteForm: {
        RecordId: "",
        Remark: ""
      }
    };
  },
  mounted() {
    this.get_dnsList();
  },
  methods: {
    //编辑
    editAction(id) {},

    // 获取数据
    get_dnsList() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        this.current,
        this.form
      );
      get_dnsList(data).then(res => {
        console.log(res);
        if (res.errcode == 0) {
          res.data.list.map(e => {
            e.TTL
              ? (e.newTLL = parseFloat(e.TTL / 60).toFixed(2) + "分")
              : (e.newTLL = "0分");
          });
          this.list = res.data.list;
          this.totalCount = res.data.count;
          this.domain = res.data.domain;
          this.ip = res.data.ip;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map(item => {
        this.selectArr.push({ id: item.id });
      });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;

      this.get_dnsList();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.size = pageSize;
      this.get_dnsList();
    },
    changePage(page) {
      console.log(page);
      this.current.page = page;
      this.get_dnsList();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.get_dnsList();
    },
    //添加记录
    add_record() {
      this.$refs.addRecordListFrom.validate(valid => {
        if (valid) {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              )
            },
            apiUrl().name,
            this.addForm
          );
          add_record(data).then(res => {
            if (res.errcode == 0) {
              this.$message.success("添加成功");
              this.get_dnsList();
            } else {
              this.$message.error(res.errmsg);
            }
          });
          this.addedFormVisible = false;
        }
      });
    },
    // 删除记录
    delete_record(scope) {
      let RecordId = scope.row.RecordId;
      this.$confirm("确认删除选中的解析记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            )
          },
          apiUrl().name,
          { RecordId: RecordId }
        );
        delete_record(data).then(res => {
          if (res.errcode == 0) {
            this.$message.success("删除成功");
            this.get_dnsList();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      });
    },
    // 修改解析记录
    edit_record_show(scope) {
      this.editForm.RR = "";
      this.editForm.RecordId = "";
      this.editForm.RROld = "";
      this.editForm.RR = scope.row.RR;
      this.editForm.RecordId = scope.row.RecordId;
      this.editForm.RROld = scope.row.RR;
      this.$nextTick(() => {
        this.editFormVisible = true;
      });
    },
    comfirm_edit_record() {
      this.$refs.editRecordListFrom.validate(valid => {
        if (valid) {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              )
            },
            apiUrl().name,
            this.editForm
          );
          edit_record(data).then(res => {
            if (res.errcode == 0) {
              this.$message.success("修改成功");
              this.get_dnsList();
            } else {
              this.$message.error(res.errmsg);
            }
          });
          this.editFormVisible = false;
        }
      });
    },
    //添加备注
    add_note_show(scope) {
      this.noteForm.RecordId = "";
      this.noteForm.RecordId = scope.row.RecordId;
      this.noteForm.Remark = scope.row.Remark;
      this.noteFormVisible = true;
    },
    confirm_edit_remark() {
      this.$refs.noteFormVisible.validate(valid => {
        if (valid) {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              )
            },
            apiUrl().name,
            this.noteForm
          );
          edit_remark(data).then(res => {
            if (res.errcode == 0) {
              this.$message.success("添加成功");
              this.get_dnsList();
            } else {
              this.$message.error(res.errmsg);
            }
          });
          this.noteFormVisible = false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
  .el-select {
    width: 114px;
  }
  .more {
    margin-left: 50px;
  }
  .handle_btn {
    padding: 0;
    border: 0;
  }

  .delete {
    color: red;
  }
  .note {
    color: #073b4c;
  }
  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    // width: calc(100% - 180px);
    width: 100%;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }
  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }
      &.hover-row > td {
        background: none !important;
      }
      .current-row > td {
        background: none !important;
      }
    }
  }
  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }
  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }
  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }
}
.enable {
  color: #03a98e;
}
.disabled {
  color: red;
}
</style>
